<template>
  <div class="notice-view">
    <!-- 搜索组件 -->
    <notice-search
      v-model:keyword="searchParams.keyword"
      v-model:type="searchParams.type"
      @search="handleSearch"
      @reset="handleReset"
    />

    <!-- 操作按钮 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleCreate">新增公告</el-button>
      <el-button @click="refreshData">刷新数据</el-button>
    </div>

    <!-- 表格组件 -->
    <notice-table
      :data="noticeList"
      :loading="loading"
      @edit="handleEdit"
      @delete="handleDelete"
      @status-change="handleStatusChange"
    />

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />

    <!-- 弹窗组件 -->
    <notice-dialog
      v-model="dialogVisible"
      :notice-id="currentNoticeId"
      @refresh="refreshData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useNoticeStore } from '../../stores/notice/noticeStore'
import { getNoticesByPage } from '../../api/notice';
import NoticeSearch from '../../components/notice/NoticeSearch.vue';
import NoticeTable from '../../components/notice/NoticeTable.vue';
import NoticeDialog from '../../components/notice/NoticeDialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useNoticeStore()
const searchParams = ref({
  type: '',
  status: '',
  isPinned: undefined,
  keyword: '',
})
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const noticeList = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const currentNoticeId = ref<number | undefined>(undefined)

// 初始化数据
const initData = async () => {
  loading.value = true;
  try {
    const res = await getNoticesByPage({
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      type: searchParams.value.type,
      status: searchParams.value.status,
      isPinned: searchParams.value.isPinned,
      keyword: searchParams.value.keyword
    });
    noticeList.value = res.data.records;
    total.value = res.data.total;
  } finally {
    loading.value = false;
  }
}

// 事件处理
const handleSearch = () => initData()
const handleReset = () => {
  searchParams.value = { type: '', status: '', isPinned: undefined, keyword: '' }
  initData()
}
const handleCreate = () => {
  currentNoticeId.value = undefined
  dialogVisible.value = true
}
const handleEdit = (id: number) => {
  currentNoticeId.value = id
  dialogVisible.value = true
}
const handleDelete = (id: number) => {
  ElMessageBox.confirm(
    '此操作将永久删除该公告, 是否继续?',
    '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true
    }
  ).then(async () => {
    const res = await store.deleteNotice(id)
    if (res && res.data) {
      ElMessage.success('删除成功')
      initData()
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}
const handleStatusChange = (row: any) => store.updateNoticeStatus(row)
const refreshData = () => initData()
const handlePageChange = (page: number) => {
  currentPage.value = page;
  initData();
};

const handleSizeChange = (size: number) => {
  pageSize.value = size;
  initData();
};

onMounted(initData)
</script>

<style scoped>
.notice-view {
  padding: 0;
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.operation-bar {
  margin: 20px 0 0 0;
  display: flex;
  gap: 10px;
  padding: 0 32px;
}
.notice-search {
  margin: 0;
  padding: 24px 32px 0 32px;
  background: #fff;
  display: flex;
  gap: 24px;
  align-items: center;
}
.notice-search .el-input {
  width: 340px;
}
.notice-search .el-select {
  width: 200px;
}
.el-table {
  flex: 1;
  margin: 0 32px;
  min-height: 60vh;
  max-width: unset;
}
.el-pagination {
  margin: 24px 32px 0 32px;
  align-self: flex-end;
}
</style>